<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>


        <table cellspacing="10px">
            <tr>
                <td>注册邮箱:</td>
                <td><input></td>
            </tr>
            <tr>
                <td></td>
                <td>你还可以手机注册</td>
            </tr>
            <tr>
                <td>创建密码:</td>
                <td><input></td>
            </tr>
            <tr>
                <td>真实姓名:</td>
                <td><input></td>
            </tr>
            <tr>
                <td align="right">性别:</td>
                <td>
                    <input type="radio">男
                    <input type="radio">女
                </td>
            </tr>
            <tr>
                <td align="right">生日:</td>
                <td>
                    <select>
                        <option>2001</option>
                    </select>年
                    <select>
                        <option>01</option>
                    </select>月
                    <select>
                        <option>01</option>
                    </select>日
                </td>
            </tr>
            <tr>
                <td align="right">我正在:</td>
                <td>
                    <select>
                        <option>学习</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td></td>
                <td>
                    <img src="verycode.gif" id="img1"> &nbsp;  &nbsp; <span onclick="changeimg()">看不清,换一张</span>
                </td>
            </tr>
            <tr>
                <td align="right">验证码:</td>
                <td><input id="inputstr"></td>
            </tr>
            <tr>
                <td></td>
                <td>
                   <img src="btn_reg.gif" onclick="getcode()">
                </td>
            </tr>
        </table>

        <script>
            var imgList = ["1111.png", "1234.png", "2222.png", "3333.png", "4567.png"]
            var imgCode = ["1111", "1234", "2222", "3333", "4567"]

            // var list = [{
            //     url: "1111.png",
            //     code: "1111"
            // },{
            //     url: "1234.png",
            //     code: "1234"
            // }]
            //
            var tag = -1;

            function changeimg() {
                var imgNode = document.getElementById("img1")
                var index = Math.floor(Math.random() * imgList.length)

                while (index == tag){
                    index = Math.floor(Math.random() * imgList.length)
                }

                imgNode.src = imgList[index]

                tag = index;
            }

            function getcode() {
                var inputstr = document.getElementById("inputstr").value

                // console.log(imgCode[tag])
                // console.log(inputstr)

                if (tag == -1){
                    if (inputstr.toUpperCase() == "BNKSU"){
                        alert("验证码正确")
                    } else {
                        alert("验证码错误")
                    }
                    return
                }



                if ( inputstr == imgCode[tag]){
                    alert("验证码正确")
                } else {
                    alert("验证码错误")
                }
            }
        </script>

</body>
</html>
